<template>
  <!--首页-->
  <div class="dashboard-container">
    <div class="dashboard-text">{{ hello }}好，{{ name }}</div>
    <div class="center">
      <h2>今日推荐菜谱</h2>
      <carousel
        :carousel-list="bannerList"
        :router-prefix="'/dish/manage'"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Carousel from '@/components/Carousel'

export default {
  name: 'Dashboard',
  components: { Carousel },
  data() {
    return {
      hour: new Date().getHours(),
      bannerList: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ]),
    hello() {
      let s = ''
      if (this.hour >= 0 && this.hour <= 5) {
        s = '凌晨'
      } else if (this.hour > 5 && this.hour <= 11) {
        s = '上午'
      } else if (this.hour > 11 && this.hour <= 13) {
        s = '中午'
      } else if (this.hour > 13 && this.hour <= 17) {
        s = '下午'
      } else if (this.hour > 17 && this.hour <= 19) {
        s = '傍晚'
      } else {
        s = '晚上'
      }
      return s
    }
  },
  mounted() {
    this.$api.dashboard.getBanner().then(response => {
      this.bannerList = response.data
      for (let i = 0; i < this.bannerList.length; i++) {
        this.bannerList[i].pic = this.$api.img.server + this.bannerList[i].pic
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.center {
  box-sizing: border-box;
  width: 70%;
  height: 70%;
  padding: 5px;
  float: left;
  text-align: center;
}
</style>
